
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/assets/css/layui.css">
    <link rel="stylesheet" href="/assets/css/view.css"/>
    <link rel="icon" href="/favicon.ico">
    <title>管理后台</title>
</head>
<body class="layui-view-body">
<div class="layui-content">

    <div class="layui-row">
        <div class="layui-card">
            <div class="layui-card-body">

                <div class="form-box">

                    <div class="layui-form layui-form-item">
                        <div class="layui-inline">
                            <div class="layui-form-mid">店铺名:</div>
                            <div class="layui-input-inline" style="width: 200px;">
                                <input id="param1" type="text" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid">等级:</div>
                            <div class="layui-input-inline" style="width: 200px;">
                                <input id="param2" type="number" autocomplete="off" class="layui-input">
                            </div>
<!--                            <div class="layui-form-mid">性别:</div>-->
<!--                            <div class="layui-input-inline" style="width: 100px;">-->
<!--                                <select name="sex">-->
<!--                                    <option value="1">男</option>-->
<!--                                    <option value="2">女</option>-->
<!--                                </select>-->
<!--                            </div>-->
                            <button id="searchBtn" class="layui-btn layui-btn-blue"><svg style="vertical-align: middle;" t="1616598635842" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2349" width="16" height="16"><path d="M581.973333 846.933333a380.8 380.8 0 1 1 380.8-380.8A381.226667 381.226667 0 0 1 581.973333 846.933333z m0-688a307.2 307.2 0 1 0 307.2 307.2 307.413333 307.413333 0 0 0-307.2-307.2z" fill="#FA6302" p-id="2350"></path><path d="M146.56 938.666667a36.906667 36.906667 0 0 1-26.026667-64l192-190.933334a36.906667 36.906667 0 0 1 52.053334 52.266667l-192 192a37.333333 37.333333 0 0 1-26.026667 10.666667z" fill="#43D7B4" p-id="2351"></path><path d="M470.826667 274.773333m-49.066667 0a49.066667 49.066667 0 1 0 98.133333 0 49.066667 49.066667 0 1 0-98.133333 0Z" fill="#43D7B4" p-id="2352"></path><path d="M312.106667 684.8l-23.68 23.466667A388.693333 388.693333 0 0 0 341.333333 760.32l23.466667-23.253333a36.906667 36.906667 0 0 0-52.053333-52.266667z" fill="#425300" p-id="2353"></path></svg><span style="margin-left: 10px">查询</span></button>
                            <button id="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>

                    <button  id="add"  class="layui-btn layui-btn-blue"><i class="layui-icon">&#xe654;</i>新增</button>
                    <table id="storeTable" lay-filter="storeTable"></table>
                </div>

            </div>
        </div>
    </div>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="/assets/layui.all.js"></script>
<script src="/js/request.js"></script>
<script th:inline="javascript">
    var element = layui.element;
    var table = layui.table;
    var layer = layui.layer;
    var form = layui.form;
    //form.render();
    var $ = layui.jquery;
    table.render({
        elem: '#storeTable',
        url:'/store/list',
        parseData: function(res){ //res 即为原始返回的数据
            return {
                "status": 0, //解析接口状态
                "msg": res.msg, //解析提示文本
                "count": 200, //解析数据长度
                "data": res.data //解析数据列表
            };
        },
        cols: [[ //标题栏
            {field: 'id', title: 'ID', width: 250}
            , {field: 'storeTitle', title: '店铺名称', width: 220}
            , {field: 'intro', title: '店铺介绍', width: 250}
            , {field: 'level', title: '店铺等级', width: 80,sort:true}
            , {field: 'gmtCreated', title: '创建时间', width: 200}
            , {field: 'gmtModified', title: '修改时间', width: 200}
            ,{fixed: 'right', width:150, align:'right', toolbar: '#barDemo'}
        ]]

        , skin: 'line'//表格风格
        , title:"店铺表"
        , even: true
        , page: true //是否显示分页
        , limits: [10,15]
        , limit: 10 //每页默认显示的数量
    });

    //展示已知数据
    //搜索
    function search(){
        let param = new Object();
        if ($("#param1").val()){
            param["storeTitle"]=$("#param1").val();
        }
        if ($("#param2").val()){
            param["level"]=$("#param2").val();
        }
        if (JSON.stringify(param) === '{}'){
            layer.msg("至少输入一个查询条件",{icon:2})
            return;
        }
        table.reload('storeTable', {
            url: '/store/search',
            method:"post",
            contentType: 'application/json',
            where: param
            , page: {
                curr: 1 //重新从第 1 页开始
            }
        });
    }

    $("#searchBtn").on("click",()=>{
        search();
    });

    //重置
    $("#reset").on("click",()=>{
        $("#param1").val("");
        $("#param2").val("");
    })




    //监听行工具事件
    table.on('tool(storeTable)', function(obj){
        var data = obj.data;
        console.log(form)

        if(obj.event === 'del'){
            layer.confirm('真的删除行么',async function(index){
                obj.del();
                const  result = await requests(`/store/del/${obj.data.id}`,"DELETE");
                if (result.success){
                    layer.msg("删除成功",{icon: 1,time:1000 });
                }
                layer.close(index);
            });
        } else if(obj.event === 'edit'){
             //表单回显
            $('#storeTitle').val(obj.data.storeTitle);
            $('#id').val(obj.data.id);
            $('#intro').val(obj.data.intro);
            $('#level').val(obj.data.level);

            layer.open({
                title:"添加店铺",
                //调整弹框的大小
                area:['800px','500px'],
                shadeClose:true,//点击旁边地方自动关闭
                //动画
                anim:2,
                //弹出层的基本类型
                type: 1,
                //刚才定义的弹窗页面
                content: $('#form'), //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']

            });
        }
    });

    $('#add').on("click",function(){

        $('#storeTitle').val("");
        $('#id').val("");
        $('#intro').val("");
        $('#level').val(0);
        layer.open({
            title:"添加店铺",
            //调整弹框的大小
            area:['800px','500px'],
            shadeClose:true,//点击旁边地方自动关闭
            //动画
            anim:2,
            //弹出层的基本类型
            type: 1,
            //刚才定义的弹窗页面
            content: $('#form'), //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']

        });
    });

    //监听提交
    form.on('submit(formSubmit)',async function(data){

        const subData = data.field;
        //自定义验证规则
        if (subData.storeTitle.trim()===""){
            layer.msg("请完善表单",{icon: 2,time:1000 });
            return ;
        }

        const result = await requests("/store/save","POST",subData);
       console.log(result);
       if (result){
           layer.msg("提交成功",{icon: 1,time:1000 });
       }
    });


</script>
</body>

<div style="display: none; margin-top:20px" id="form" class="form">
    <form class="layui-form" lay-filter="storeForm">
        <div style="display: none" class="layui-form-item">
            <label class="layui-form-label">店铺名称</label>
            <div class="layui-input-inline">
                <input type="text" id="id" name="id"  autocomplete="off" placeholder="id" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">店铺名称</label>
            <div class="layui-input-inline">
                <input type="text" id="storeTitle" name="storeTitle" lay-verify="title" autocomplete="off" placeholder="请输入店铺名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">店铺介绍</label>
            <div class="layui-input-block">
                <textarea name="intro" id="intro" placeholder="请输入店铺介绍" lay-verify="title" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">店铺等级</label>
            <div class="layui-input-inline">
                <input type="number" id="level" name="level" lay-verify="title" autocomplete="off" placeholder="请输入店铺等级（1-5）" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formSubmit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>
</div>
</html>